<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客首页</title>
    <link rel="stylesheet" href="/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/blog/amaze/css/base.css">
    <link href="/imgs/favicon.ico" rel="shortcut icon">
    <script src="/js/jquery-3.4.1.min.js"></script>

    <style>

        .layui-nav {
            opacity: 0.5;
            z-index: 3;
            position: fixed;
        }
        .blog-flex-center{
            left: 0;
            position: absolute;
        }

    </style>

    <link rel="stylesheet" href="/css/like.css">
    <script src="/js/like.js"></script>

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    <script src="/js/kawai.js"></script><!--必须在后面-->
    <!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
    <!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
    <!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
    <!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
    <!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
    <!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->



</head>
<body>



<div th:replace="~{commons/blog_commons::topbar}"></div>

<div th:replace="~{commons/blog_commons::topimg}"></div>

<!--主体-->
<div class="am-g am-g-fixed blog-fixed">
    <div class="am-u-lg-8 am-u-sm-12"><!--博客列表展示-->
        <main class="articles-list">
            <div>
                <!--单独的一个博客-->
                <article class="am-g blog-entry-article" th:if="${blogs != null}" th:each="blog:${blogs}">
                    <div class="am-u-lg-6 am-u-lg-12 am-u-sm-12 blog-entry-text post-preview">
                        <div class="topic-header">
                            <div class="pull-left">
                                <div class="blog-flex-center">
                                    <div class="blog-flex0">
                                        <img style="width: 50px;height: 50px;margin-top: 10px;margin-left: 15px;"
                                             th:src="@{/images/header/}+${configs.get('pic')}" alt="头像" class="link avatar avatar-image">
                                    </div>
                                    <div class="author-lockup blog-flex1">
                                        <a class="link" href="javascript:;" th:text="${configs.get('selfname')}"></a>
                                        <span class="in">in</span>
                                        <span class="category-name">
                                <a class="category-name" rel="tag" th:href="@{/blog/category/}+${blog.getCatagory().getName()}"
                                   th:text="${blog.getCatagory().getName()}"></a>
                            </span>
                                    </div>
                                </div>
                            </div>
                            <span class="pull-right time pc_time" th:text="${blog.getCreateTime()}"></span>
                        </div>
                        <h1 class="post-index-title"><a itemtype="url" th:href="@{/blog/detail/}+${blog.getId()}" th:text="${blog.getTitle()}">

                        </a>
                        </h1>
                        <div class="post-content-preview article-body">
                            <a th:href="@{/blog/detail/}+${blog.getId()}">
                                <img th:src="@{/images/blogs/header/}+${blog.getImage()}" style="width: 450px;height: 330px;" alt="封面图片"></a>
                        </div>
                        <div class="clearfix topic-footer">
                            <span class="pull-left time mobile_time"></span>
                        </div>
                    </div></article>



                <div id="blogs"></div>
                <div id="count" th:text="${count}" hidden></div>
                <div id="curr" th:text="${curr}" hidden></div>
                <div id="category_name" th:text="${category_name}" hidden></div>
                <div id="tag_name" th:text="${tag_name}" hidden></div>

            </div>
        </main>
    </div>

    <div class="am-u-lg-4 am-u-sm-12 am-u-lg-offset-0 am-u-sm-offset-0 sidebar-container">
        <section>
            <section>
                <div class="sidebar-header">
                <span class="sidebar-header-title">
                    搜索文章
                </span>
                </div>
                <div class="sidebar-search">
                    <form action="/blog/search" method="get" accept-charset="utf-8">
                        <div class="search-input">
                            <input type="text" id="searchbox" name="key" th:value="${key}" placeholder="输入关键字搜索">
                            <button type="submit" class="search-submit"></button>
                        </div>
                    </form>
                </div>
            </section>

            <section>
                <div class="sidebar-header">
                <span class="sidebar-header-title">
                    热门标签
                </span>
                </div>
                <div class="tags">
                    <a rel="tag" th:href="@{/blog/tag/}+${t.getName()}"  th:each="t:${tags}" th:text="${t.getName()}" ></a>
                </div>
            </section>
            <section>
                <div class="sidebar-header">
                <span class="sidebar-header-title">
                    最新发布
                </span>
                </div>
                <div class="sidebar-lists">
                    <ul class="sidebar-list-body sidebar-list-items">
                        <li class="sidebar-list-item">
                            <a th:href="@{/blog/detail/}+${newBlog.getId()}" th:each="newBlog : ${newBlogs}" class="tag tooltipped tooltipped-n" th:text="${newBlog.getTitle()}"></a>
                        </li>
                    </ul>
                </div>
            </section>
            <section>
                <div class="sidebar-header">
                <span class="sidebar-header-title">
                    点击最多
                </span>
                </div>
                <main class="sidebar-lists">
                    <ul>
                        <li class="sidebar-list-item">
                            <a class="tag tooltipped tooltipped-n" th:each="hotBlog:${hotBlogs}" th:href="@{/blog/detail/}+${hotBlog.getId()}" th:text="${hotBlog.getTitle()}"></a>
                        </li>
                    </ul>
                </main>
            </section>
        </section></div>
</div>


<div th:replace="~{commons/blog_commons::footer}"></div>


<script src="/js/index.js"></script>
<script src="/js/public.js"></script>

</body>
</html>